import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image } from "@tarojs/components-rn";
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import { getRuntime, partOf } from "../../utils/common";
import customStyleSheet from "./custom_styles";

import bg_12 from "../../assets/img/bg_12.jpg";
var _styleSheet = customStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let Custom = class Custom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '礼品定制中心' });
    this.getAllCustomizedCategory();
  }
  getAllCustomizedCategory() {
    let { PointMallStore } = this.props.stores;
    PointMallStore.getAllCustomizedCategory({
      callback: res => {
        console.log(res);
        this.setState({ items: toJS(res.items) });
      }
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  render() {
    let { items } = this.state;
    return <View style={_styleSheet["mall-custom-center"]}>
        {items.length > 0 && <View>
               <Image src={bg_12} style={_styleSheet["header-pic"]} />
               <View style={_styleSheet["center-con"]}>
                 {items.map((item, index) => {
            return <View key={item.id} onClick={this.handelRouter.bind(this, '/pages/mall/custom_list?id=' + item.id)} style={_styleSheet["custom-item"]}>
                         <Image src={item.cateGoryLogo} style={_styleSheet["custom-icon"]} />
                         <View style={_styleSheet["info"]}>
                           <View style={[_styleSheet["title"], _styleSheet["list-title"]]}>{item.cateGoryName}</View>
                           <View style={[_styleSheet["desc"], _styleSheet["list-info"]]}>{partOf(item.introduce, 20)}</View>
                         </View>
                         <View style={_getStyle('btn-banli btn' + (index % 4 * 1 + 1))}>立即定制</View>
                       </View>;
          })}
               </View>
            </View>}
        {items.length <= 0 && <View style={[_styleSheet["page-none-info"], _styleSheet["page-none-info-center"], { backgroundColor: '#ededed' }]}>商品上线中, 敬请期待...</View>}
      </View>;
  }
};
Custom = tslib_1.__decorate([inject("stores"), observer], Custom);
export default Custom;